<template>
  <el-dialog :title="formData.id ? '编辑分类':'新增分类'" :visible="showDialog" @close="cancelFn">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="50px"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" type="textarea" :rows="5" />
      </el-form-item>
      <!-- 上传照片 -->
      <el-form-item label="封面" prop="image">
        <!-- 放置上传图片 -->
        <ImageUpload ref="imageUpload" />
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="end">
      <el-button type="primary" @click="confirmFn">确 定</el-button>
      <el-button @click="cancelFn">取 消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addCategory } from '@/api/category' // 获取新增分类接口
import { editCategory } from '@/api/category' // 获取编辑分类接口
import { appointCategory } from '@/api/category' // 获取指定分类接口--编辑分类接口回显数据
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        // 表单内容
        title: '', // 标题
        desc: '', // 描述
        image: ''
      },
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          { max: '20', message: '标题字符在20个字内', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
          { max: '100', message: '描述在100个字内', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 点击确定事件
    async confirmFn() {
      try {
        // 获取封面地址
        const file = this.$refs.imageUpload.fileList[0]
        const url = file.url
        // 判断图片的状态值是否上传成功 没有上传完成 不给保存 提示未上传成功
        if (file && file.status !== 'success') {
          return this.$message.warning('图片未上传成功,请等待')
        }
        // 校验表单
        await this.$refs.formRef.validate()
        // 根据id判断是编辑还是新增
        if (this.formData.id) {
          // 调用编辑接口
          await editCategory({
            ...this.formData, image: file ? url : ''
          })
        } else {
          // 调用新增分类接口
          await addCategory({ ...this.formData,
          // 是否有上传图片 如果有就显示图片 没上传就显示空 不然会报错
            image: file ? url : '' })
        }
        // 通知父组件同步刷新员工列表
        this.$emit('updateList')
        // 关闭弹窗
        this.cancelFn()
      } catch (error) {
        console.log(error)
      }
    },
    // 取消事件
    cancelFn() {
      // 清除校验规则
      this.$refs.formRef.resetFields()
      // 清空表单内容
      this.formData = {
        title: '', // 标题
        desc: '', // 描述
        image: ''
      }
      // 关闭编辑清空上传图片的内容
      this.$refs.imageUpload.fileList = []
      // 通知父组件同步关闭弹窗
      this.$emit('update:showDialog', false)
    },
    // 封装编辑回显数据
    async getEditCategory(id) {
      // 调用编辑分类接口---回显数据
      // 把id赋值回给formData表单数据中保存起来
      this.formData = await appointCategory(id)
      // 封面回显
      this.$refs.imageUpload.fileList.push({
        url: this.formData.image
      })
    }
  }
}
</script>

<style>

</style>
